<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>豆瓣</title>
	<link rel="stylesheet" href="../Public/Css/style.css">
	<link rel="stylesheet" href="../Public/Css/book.css">
</head>
<body>
	<!-- 顶栏导航 begin -->
	<div class="header">
		<div class="global-nav">
			<ul>
				<li><a href="">豆瓣</a></li>
				<li><a href="">读书</a></li>
				<li><a href="">电影</a></li>
				<li><a href="">阅读</a></li>
				<li><a href="">东西</a></li>
			</ul>
		</div>
		<div class="global-info">
			<a href="">登录</a>
			<a href="">注册</a>
		</div>
		
	</div>
	<!-- 顶部导航 end -->
	<!-- 模块头部 begin -->
	<div class="nav">
		<div class="warp">
			<div class="primary">
				<div class="logo">
					<a href=""></a>
				</div>
				<div class="search">
					<form action="">
						<input type="text" placeholder="书名、作者、ISBN">
						<input type="submit" value="Search">
					</form>
				</div>
			</div>
		</div>
		<div class="secondary">
			<div class="memu">
				<ul>
					<li><a href="">分类浏览</a></li>
					<li><a href="">购书单</a></li>
					<li><a href="">电子图书</a></li>
					<li><a href="">读书盘点</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 模块头部 end -->
	<!-- 内容容器 begin -->
	<div class="container">
		<!-- 横版bar begin -->
		<div class="top-banner">
			<a href=""><img src="../../Images/top-banner.jpg" height="90" width="950" alt=""></a>
		</div>
		<!-- 横版bar end -->
		<!-- 左部内容 begin -->
		<div class="left">
			<!-- 新书推荐 begin -->
			<div class="new">
				<div class="title">
					<h2>新书推荐</h2>
					<a href="">更多>></a>
					<div class="turns">
						<ul>
							<li><a href="">1</a></li>
							<li><a href="">2</a></li>
							<li><a href="">3</a></li>
							<li><a href="">4</a></li>
						</ul>
						<div class="switch">
							<a class="switch-left" href=""></a>
							<a class="switch-right" href=""></a>
						</div>
					</div>
				</div>
				<div class="items">
					<ul>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../Images/bookpic.jpg" height="158px" width="106px" alt=""></a>
							<div class="item-info">
								<p><a class="bookname" href="">书名</a></p>
								<p class="author">作者</p>
							</div>
						</li>
					</ul>
				</div>
				
			</div>
			<!-- 新书推荐 end -->
			<!-- 最受关注 begin -->
			<div class="attention">
				<div class="title">
					<h2>最受关注</h2>
					<a href="">虚构类>></a>
					<a href="">非虚构类>></a>
				</div>
				<div class="items">
					<ul>
						<li>
							<div class="cover">
								<a href=""><img src="../../Images/attention-book.jpg" height="97" width="67" alt=""></a>
							</div>
							<div class="info">
								<h4><a href="">岛上书店</a></h4>
								<span>评分</span>
								<p class="author">作者</p>
								<p class="kind">所属分类</p>
								<span>是否有电子书</span>	
								<p class="des">描述</p>
							</div>
						</li>
						<li>
							<div class="cover">
								<a href=""><img src="../../Images/attention-book.jpg" height="97" width="67" alt=""></a>
							</div>
							<div class="info">
								<h4><a href="">岛上书店</a></h4>
								<span>评分</span>
								<p class="author">作者</p>
								<p class="kind">所属分类</p>
								<span>是否有电子书</span>	
								<p class="des">描述</p>
							</div>
						</li>
						<li>
							<div class="cover">
								<a href=""><img src="../../Images/attention-book.jpg" height="97" width="67" alt=""></a>
							</div>
							<div class="info">
								<h4><a href="">岛上书店</a></h4>
								<span>评分</span>
								<p class="author">作者</p>
								<p class="kind">所属分类</p>
								<span>是否有电子书</span>	
								<p class="des">描述</p>
							</div>
						</li>
						<li>
							<div class="cover">
								<a href=""><img src="../../Images/attention-book.jpg" height="97" width="67" alt=""></a>
							</div>
							<div class="info">
								<h4><a href="">岛上书店</a></h4>
								<span>评分</span>
								<p class="author">作者</p>
								<p class="kind">所属分类</p>
								<span>是否有电子书</span>	
								<p class="des">描述</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 最受关注 end -->
		</div>
		<!-- 左部内容 end -->
		<!-- 右部内容 begin -->
		<div class="right">
			<div class="hottag-banner">
				<a href=""><img src="../../Images/right-banner.jpg" height="250" width="300" alt=""></a>
			</div>
			<div class="hottag">
				<div class="title">
					<h2>热门标签</h2>
					<a href="">更多>></a>
				</div>
				<div class="items">
					<ul>
						<li>
							<span>文学</span>
							<div class="tags">
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">更多></a>
							</div>
						</li>
						<li>
							<span>文学</span>
							<div class="tags">
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">小说</a>
								<a href="">更多></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 畅销图书榜 begin -->
			<div class="best-selling">
				<div class="title">
					<h2>畅销图书榜</h2>
				</div>
				<div class="channels">
					<a href="">
						<img src="" alt="">
						<span>京东</span>
					</a>
					<a href="">
						<img src="" alt="">
						<span>亚马逊</span>
					</a>
					<a href="">
						<img src="" alt="">
						<span>当当</span>
					</a>
				</div>
				<div class="items">
					<ul>
						<li>
							<div class="info">
								<span>1.</span>
								<a href="">秘密花园</a>
								<p>[英]乔汉娜·贝斯福</p>
							</div>
							<a class="gobuy" href="">去购买</a>
						</li>
						<li>
							<div class="info">
								<span>1.</span>
								<a href="">秘密花园</a>
								<p>[英]乔汉娜·贝斯福</p>
							</div>
							<a class="gobuy" href="">去购买</a>
						</li>
						<li>
							<div class="info">
								<span>1.</span>
								<a href="">秘密花园</a>
								<p>[英]乔汉娜·贝斯福</p>
							</div>
							<a class="gobuy" href="">去购买</a>
						</li>
						<li>
							<div class="info">
								<span>1.</span>
								<a href="">秘密花园</a>
								<p>[英]乔汉娜·贝斯福</p>
							</div>
							<a class="gobuy" href="">去购买</a>
						</li>
						<li>
							<div class="info">
								<span>1.</span>
								<a href="">秘密花园</a>
								<p>[英]乔汉娜·贝斯福</p>
							</div>
							<a class="gobuy" href="">去购买</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 畅销图书榜 end -->
		</div>
		<!-- 右部内容 end -->
	</div>
	<!-- 内容容器 end -->
</body>
</html>